<template>
    <header>
        <div class="logo" @click="returnMain()">
            <img src="../../assets/img/logo_app.png" alt="">
        </div>
        <div class="search">
            <div>
                <input :placeholder="placeholderSearch" type="text" v-model=searchInfo>
                <button @click="search()">搜索</button>
            </div>
        </div>
        <nav>
            <ul>
                <li><a>华为专区</a></li>
                <li><a>鸿蒙互联</a></li>
                <li><a>智能互联</a></li>
            </ul>
        </nav>
        <div class="user">
            <div>
                <span class="loginStatus">{{ loginUsername }}</span>
                <span @click="cart()"> <button><i class="el-icon-shopping-cart-1"></i></button></span>
                <svg t="1682327895012" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="3393" width="32" height="32">
                    <path d="M531.185 943.532c0 8.9-6.493 16.114-14.503 16.114h-9.364c-8.01 0-14.504-7.214-14.504-16.114V80.467c0-8.899 6.493-16.114 14.504-16.114h9.364c8.01 0 14.503 7.215 14.503 16.114v863.065z"
                          p-id="3394" fill="#2c2c2c"></path>
                </svg>
                <span class="login"> <button @click="toLogin()"><i class="el-icon-user-solid"></i></button></span>
            </div>
        </div>
    </header>
</template>

<script>
import login from "@/components/Login.vue";
import axios from "axios";


export default {
    name: "top",
    data() {
        return {
            loginUsername: '未登录',
            searchInfo: '',
            products: [],
            placeholderSearch: 'Mate'
        }
    },
    computed: {
        login() {
            return login
        }
    },
    mounted() {
        this.isLogin()
    },
    methods: {
        toLogin() {
            if (window.sessionStorage.getItem("username")) {
                this.$router.push('person')
            } else {
                this.$router.push('login')
            }
        },
        isLogin() {
            if (window.sessionStorage.getItem("username")) {
                this.loginUsername = '欢迎您，' + window.sessionStorage.getItem('username')
            } else {
                this.loginUsername = '未登录'
            }
        },
        cart() {
            if (window.sessionStorage.getItem("username") && window.sessionStorage.getItem("token")) {
                console.log(window.sessionStorage.getItem("username"))
                this.$router.push('cartList')
            } else this.$router.push("login")
        },
        address() {
            this.$router.push({
                name: 'address'
            })
        },
        deleteAddress() {
            this.$router.push({
                name: 'deleteAddress'
            })
        },
        search() {
            if (!this.searchInfo) {
                this.searchInfo = this.placeholderSearch
            }
            window.sessionStorage.setItem("product_name", '')
            window.sessionStorage.setItem("searchInfo", this.searchInfo)
            axios({
                method: "get",
                url: `/items/someItems/${this.searchInfo}`
            }).then(res => {
                this.products = res.data.data
                this.showItemImage()
                window.sessionStorage.setItem("products", this.products)
                this.$router.push("product")
            })
        },
        showItemImage() {
            if (this.products !== undefined)
                for (let i = 0; i < this.products.length; i++) {
                    axios({
                        method: "get",
                        url: `images/items/${this.products[i].itemId}`,
                        responseType: "blob"
                    }).then(res => {
                        this.products[i].image = URL.createObjectURL(res.data);
                    })
                }
        },
        returnMain() {
            this.$router.replace({name: "MainPage"})
        }

    }
}
</script>

<style scoped>
header {
    height: 80px;
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    background-color: white;
}

.logo {
    height: 80px;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search {
    width: 35%;
}

.search div {
    margin-top: 10px;
    border: 2px solid red;
    border-radius: 18px;
}

.search input {
    width: 90%;
    box-sizing: border-box;
    height: 38px;
    outline: none;
    border: none;
    border-radius: 18px;
    font-size: 16px;
    text-indent: 1em;

}

.search button {
    width: 10%;
    height: 40px;
    outline: none;
    border: none;
    border-radius: 18px;
}

nav {
    width: 20%;
    font-size: 18px;
}

nav ul {
    margin: 30px auto 0;
    height: 20px;
    line-height: 20px;
    display: flex;
    justify-content: space-between;
}

nav a:hover {
    color: #C40E2B;
}

.user {
    font-size: 25px;
}

.user div {
    display: flex;
    justify-content: center;
    margin-top: 25px;

}

.user button {
    font-size: 30px;
    background-color: transparent;
    border-style: none;
}

.loginStatus {
    display: flex;
    margin-right: 30px;
    font-size: 18px;
    text-align: center;
    align-items: center;
}

.logo:hover {
    cursor: pointer;
}
</style>